<template>
<div class="dd">
  <div class="box">
    <div class="top">
      <h1>北工商学生管理系统</h1>
    </div>
    <div class="fox">
      <el-form :model="uData" :rules="rules" status-icon>
        <el-form-item label="账号" prop="username">
          <el-input v-model="uData.username"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="uData.password" type="password" autocomplete="off"/>
        </el-form-item>
        <div class="btn">
          <el-form-item>
            <el-button @click="go" type="success">登录</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'
import {LoginData} from '../type/login' //! 登录接口规范
import {useRouter} from 'vue-router'
import {setToken} from '../cookiejs/unit'
import {useStore} from "vuex";

const store = useStore();
const router = useRouter()
let UserData = reactive(new LoginData())
let uData = UserData.ruleForm // ! 账号 密码
let ruleUsername = (rule: any, value: any, callback: any) => {
  // console.log(rule, value, callback)
  if (value !== 'teacher' && value !== 'student') {
    console.log(value)
    callback(new Error('账号密码不存在'))
  } else {
    callback()
  }
} // * 账号校验规则
let rulePassword = (rule: any, value: any, callback: any) => {
  if (value !== 'teacher' && value !== 'student') {
    callback(new Error('密码不正确'))
  }
  callback()
} // * 密码校验规则
let rules = reactive({
  username: [{validator: ruleUsername, trigger: 'blur'}],
  password: [{validator: rulePassword, trigger: 'blur'}]
}) // * 校验规则
// * 获取全部router信息 console.log(router.options.routes)
let now_route: any[] = []
let admin = () => {
  router.options.routes.forEach(item => {
    if (item.meta) {
      let meta: any = item.meta.rule
      if (meta === 'vip') {
        now_route.push(item)
      }
    }
  })
}
admin()
console.log(store)
// * 跳转页面,+cookie
let go = () => {
  store.commit('Login/login') // ! 触发vuex的Login方法,让vuex中的isLogin(登录状态)变为ture
  if (uData.username === "teacher") {
    store.dispatch('Login/getTeacher')
    setToken('teacher')
  } else {
    store.dispatch('Login/getAdmin')
    setToken('admin')
  }
  setTimeout(() => {
    if (store.state.Login.username === uData.username && store.state.Login.password === uData.password) {
      router.push({
        path: '/home'
      })
    } else {
      alert('账号密码错误')
    }
  }, 1000)
}

// * 进度条
const format = (percentage: string | number) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}
html{
  background: red;
}
.dd{
  width: 100vw;
  height: 100vh;
  background: red;
  overflow: hidden;
  background:url("https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wHgr?ver=2c30") no-repeat;
  background-size:100% 100%;
}
.box{
  width: 500px;
  margin: 20% auto;
  background: antiquewhite;
}
.fox{
  width: 400px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
}
.btn{
  width: 100px;
  height: 30px;
  margin: 0 auto;
}
.top{
  text-align: center;
}
</style>
